<!--
 * @Author: your name
 * @Date: 2021-05-24 15:06:47
 * @LastEditTime: 2021-06-06 22:29:23
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \遵义报名\zunyi\src\views\user\user.vue
-->
<template>
  <div>
    <!-- 导航条 -->
    <nav-bar></nav-bar>

    <!-- 表单 -->
    <div class="container">
      <el-form :model="form" :rules="rules" ref="form" label-width="100px">
        <el-row>
          <el-col :span="8">
            <el-form-item label="姓名" prop="name">
              <myinput v-model="form.name" :isDisabled="disabled"></myinput>
            </el-form-item>

            <el-form-item label="身份证号" prop="idcard">
              <myinput v-model="form.idcard" :isDisabled="disabled"></myinput>
            </el-form-item>

            <el-form-item label="民族" prop="nation">
              <my-select
                v-model="form.nation"
                :valueArray="nation"
                :isDisabled="disabled"
              ></my-select>
            </el-form-item>

            <el-form-item label="性别" prop="sex">
              <my-radio
                :valueArray="[
                  { label: 1, content: '男' },
                  { label: 2, content: '女' },
                ]"
                :isDisabled="disabled"
              ></my-radio>
            </el-form-item>

            <el-form-item label="电话" prop="phone">
              <myinput v-model="form.phone" :isDisabled="disabled"></myinput>
            </el-form-item>

            <el-form-item label="出生日期" prop="birth">
              <date-picker
                v-model="form.birth"
                :isDisabled="disabled"
              ></date-picker>
            </el-form-item>

            <el-form-item label="文化程度" prop="education">
              <my-select
                v-model="form.education"
                :valueArray="education"
                :isDisabled="disabled"
              ></my-select>
            </el-form-item>

            <el-form-item label="联系地址" prop="addr">
              <myinput v-model="form.addr" :isDisabled="disabled"></myinput>
            </el-form-item>

            <el-form-item label="准考证头像" prop="icon">
              <upload v-model="form.icon" :isDisabled="disabled"></upload>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="毕业时间">
              <date-picker
                v-model="form.gdtm"
                :isDisabled="disabled"
              ></date-picker>
            </el-form-item>

            <el-form-item label="毕业院校">
              <myinput v-model="form.gdsl" :isDisabled="disabled"></myinput>
            </el-form-item>

            <el-form-item label="学位">
              <my-select
                :valueArray="degree"
                :isDisabled="disabled"
              ></my-select>
            </el-form-item>

            <el-form-item label="政治面貌">
              <my-select
                :valueArray="political"
                :isDisabled="disabled"
              ></my-select>
            </el-form-item>

            <el-form-item label="身份证正面照片">
              <upload v-model="form.idpic" :isDisabled="disabled"></upload>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="籍贯">
              <myinput v-model="form.nate" :isDisabled="disabled"></myinput>
            </el-form-item>

            <el-form-item label="国籍">
              <myinput
                v-model="form.nationality"
                :isDisabled="disabled"
              ></myinput>
            </el-form-item>

            <el-form-item label="户籍">
              <myinput v-model="form.census" :isDisabled="disabled"></myinput>
            </el-form-item>

            <el-form-item label="身份证背面照片">
              <upload v-model="form.idrpic" :isDisabled="disabled"></upload>
            </el-form-item>
          </el-col>
        </el-row>

        <div class="btn">
          <template v-if="disabled">
            <el-button type="danger" @click="disabled = false">修改</el-button>
          </template>
          <template v-else>
            <el-button type="primary" @click="submitForm('form')"
              >确定</el-button
            >
            <el-button type="info" @click="disabled = true">取消</el-button>
          </template>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
import { degree } from "utils/degree.js";
import { education } from "utils/education.js";
import { nation } from "utils/nation.js";
import { political } from "utils/political.js";
import { updateUrl } from "api/userInfo.js";
import { createNamespacedHelpers } from "vuex";
const { mapState, mapMutations } = createNamespacedHelpers("userInfo");
export default {
  data() {
    return {
      form: {
        //表单数据
        name: "", //姓名
        idcard: "", //身份证号
        nation: "", //民族
        sex: 1, //性别
        phone: "", //电话
        birth: "", //生日
        education: "", //教育程度
        addr: "", //地址
        icon: "", //准考证头像
        gdtm: "", //毕业时间
        gdsl: "", //毕业院校
        degree: "", //学历
        political: "", //政治面貌
        idpic: "", //身份证正面照片
        nate: "", //籍贯
        nationality: "", //国籍
        census: "", //户籍
        idrpic: "", //身份证反面照片
      },
      rules: {
        //校验规则
        name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        idcard: [
          { required: true, message: "请输入身份证号", trigger: "blur" },
          {
            trigger: "blur",
            pattern: /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/,
            message: "请输入正确的身份证号码",
          },
        ],
        nation: [{ required: true, message: "请输入民族", trigger: "blur" }],
        sex: [{ required: true, message: "请输入性别", trigger: "blur" }],
        phone: [
          { required: true, message: "请输入电话", trigger: "blur" },
          {
            trigger: "blur",
            pattern: /^[1][3,4,5,7,8][0-9]{9}$/,
            message: "请输入正确的手机号码",
          },
        ],
        birth: [{ required: true, message: "请输入生日", trigger: "blur" }],
        education: [
          { required: true, message: "请输入教育程度", trigger: "blur" },
        ],
        addr: [{ required: true, message: "请输入地址", trigger: "blur" }],
        icon: [
          { required: true, message: "请上传准考证头像", trigger: "blur" },
        ],
      },
      degree: degree, //学位
      education: education, //教育情况
      nation: nation, //民族
      political: political, //政治面貌
      disabled: true,
    };
  },
  computed: {
    ...mapState(["userInfo"]),
  },
  methods: {
    ...mapMutations(["updateUserInfo"]),
    API_update(data) {
      return this.$httpRequest({
        url: updateUrl,
        method: "POST",
        data: {
          data,
        },
      });
    },
    submitForm(formName) {
      //提交表单
      console.log(this.form);
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          let res = await this.API_update(this.form); //更新接口
          if (res.data.code === 1000) {
            this.updateUserInfo(this.form); //更新用户信息

            this.$message.success(res.data.msg);
            this.disabled = true;
          } else {
            this.$message.error(res.data.msg);
          }
        } else {
          console.log("验证失败");
          return false;
        }
      });
    },
  },
  created() {
    this.form = this.userInfo;
    console.log(this.form);
  },
};
</script>

<style lang="scss" scoped>
.btn {
  text-align: center;
}
</style>